<template>
  <div class="app-container" style="padding-top: 0">
    <el-row>
      <el-col :span="12">
        <el-page-header title="返回" @back="$router.back()" style="font-size: 16px">
        </el-page-header>

      </el-col>
      <el-col :span="12" style="text-align: right;">
        <el-link v-if="isUpdate" type="warning" style="font-size: 18px" @click="updateData">确定
        </el-link>
        <el-link v-else type="primary" style="font-size: 18px" @click="isUpdate=true">修改</el-link>
        <el-popconfirm v-if="this.$route.query.id"
                       title="确定删除吗？" @onConfirm="deleteData" style="margin-left: 22px;margin-right: 20px">
          <el-link type="danger" style="font-size: 18px;" slot="reference">删除</el-link>
        </el-popconfirm>
      </el-col>
    </el-row>

    <div v-loading="dataLoading">
      <h2>{{this.data.name||''}}</h2>
      <el-card>
        <div slot="header">
          <span>名字</span>
        </div>
        <div style="text-align: center">
          <el-input
            placeholder="请输入内容"
            v-model="data.name"
            :readonly="!isUpdate">
          </el-input>
        </div>
      </el-card>
      <el-card>
        <div slot="header">
          <span>图片</span>
          <el-upload v-if="isUpdate"
                     style="text-align: right;margin: -20px 0 0 0;padding:0"
                     ref="upload"
                     :multiple="false"
                     action=""
                     accept="image/*"
                     :http-request="uploadFile"
                     :show-file-list="false"
                     :auto-upload="true">
            <el-link slot="trigger" type="primary">重新选取图片
            </el-link>
          </el-upload>
        </div>
        <div style="text-align: center">
          <div style="height: 150px" v-if="!data.img"></div>
          <img ref="img" v-show="data.img" :src="data.img" alt="图片"
               style="width: 200px">
        </div>
      </el-card>
      <el-card>
        <div slot="header">
          价格(元)
        </div>
        <div style="text-align: center">
          <el-input-number v-model="data.price" style="width: 80%" :disabled="!isUpdate" aria-required="true"
                           :precision="2" :step="0.01"></el-input-number>
        </div>
      </el-card>

      <el-card>
        <div slot="header">
          余量
        </div>
        <div style="text-align: center">
          <el-input-number v-model="data.sales" style="width: 80%" :disabled="!isUpdate"
                           :step="1"></el-input-number>
        </div>
      </el-card>


      <el-card>
        <div slot="header">
          <span>
            信息
          </span>
        </div>
        <div style="text-align: center">
          <el-input
            type="textarea"
            :rows="6"
            placeholder="请输入内容"
            v-model="data.info"
            :readonly="!isUpdate">
          </el-input>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
  import request from "@/utils/request";

  export default {
    name: "food-detail",
    filters: {},
    data() {
      return {
        data: {},
        dataLoading: true,
        isUpdate: !this.$route.query.id
      }
    },
    computed: {},
    created() {
      this.initData()
    },

    methods: {
      initData() {
        if (!this.$route.query.id) {
          this.dataLoading = false
          return
        }
        request({
          url: '/food',
          params: {
            id: this.$route.query.id
          }
        }).then(v => {
          this.data = v.data
        }).finally(() => {
          this.dataLoading = false
        })
      },
      updateData() {
        this.dataLoading = true
        const formData = new FormData()
        this.$route.query.id && formData.append('id', this.$route.query.id)
        this.$route.query.classificationId && formData.append('classificationId', this.$route.query.classificationId)
        formData.append('price', this.data.price || 0)
        formData.append('sales', this.data.sales)
        formData.append('info', this.data.info)
        formData.append('name', this.data.name)
        formData.append('file', this.data.img)
        request({
          url: '/food',
          method: 'POST',
          data: formData
        }).then(v => {
          this.$message({
            type: 'success',
            center: true,
            message: this.$route.query.classificationId ? '添加成功！' : '修改成功！',
            duration: 1500
          });
          if (this.$route.query.classificationId) {
            this.isUpdate = false
            this.$router.replace(
              {path: '/food/detail', query: {id: v.data.id, time: Number(new Date())}})
          } else {
            this.initData()
            this.isUpdate = false
          }
        }).finally(() => {
          this.dataLoading = false
        })
      },
      deleteData() {
        request({
          url: '/food',
          method: 'DELETE',
          params: {
            id: this.$route.query.id,
          }
        }).then(v => {
          this.$message({
            type: 'success',
            center: true,
            message: '删除成功！',
            duration: 1500
          });
          this.$router.replace({path: '../food'})
        })
      },
      uploadFile: function (e) {
        this.data.img = e.file
        const reader = new FileReader()
        reader.readAsDataURL(e.file);
        reader.onload = ({target}) => {
          this.$refs.img.src = target.result
        }
      },
    }
  }
</script>

<style scoped>
  .el-card:not(first-child) {
    margin: 0 0 15px;
  }

  .img {
    height: 150px;

  }

</style>
